iOSとAndroidの機能実装比較 【画面遷移】

iOSとAndroidの機能実装比較 【画面遷移】

Clock Icon2013.09.19

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

画面遷移

今回もiOSとAndroidで大きな違いの一つと思われる画面遷移について比較してみます。
Android側については、いくつか画面遷移の方法があるので、今回はFragmentとActivityの2つに登場してもらいます。

今回も外部ライブラリ等は使わずに素手で殴りあってもらいましょう

目標

画面上に設置したボタンを押すと「画面A」⇛「画面B」⇛「画面C」と画面遷移するようなものを目指します

iOS

実装

StoryBoardを利用して画面遷移を作成します

まずは、StoryBoard上に以下のようにComponentを並べます。Navigation Controllerからはじめ、View Controllerを3つ並べます。
それぞれの画面には中央にボタンを配置しておきます。

スクリーンショット 2013-09-18 6.41.10

次に画面の遷移を指定します。基本的にはCtrlキーを押しながらドラッグするだけで、Actionが指定できるようです。

スクリーンショット_2013-09-18_6.47.46

Navigation Controllerからroot View Controllerを指定する方法に少し戸惑いましたが、以下の手順で指定ができました

まずは、Navigation Controllerを選択します
スクリーンショット_2013-09-18_7.01.13

続いて、Navigation Controllerの隣にあるView Controllerへ root view controllerのリンクをドラッグしてあげます
スクリーンショット_2013-09-18_7.01.14

root view controllerの指定が正常に行えると、次のような表示になります
スクリーンショット_2013-09-18_7.09.42

実行

スクリーンショット 2013-09-18 7.15.23

Next Screenを押すと

スクリーンショット 2013-09-18 7.15.30

指定された2番目のView Controllerを表示されました。さらにNext Screenを押すと

スクリーンショット 2013-09-18 7.50.17

最後の画面が表示されました。
iOSでは、画面遷移だけを行う場合はコードを書く必要はないようです

Android

AndroidはActivityの遷移で行う画面遷移とFragmentで行う画面遷移がありますが、今回はActivityの遷移のみで比較してみます

実装(Activity)

Androidの画面はそれぞれ別個に作成し、画面遷移を行うための操作はすべてコードで記述します

画面を作成します。必要な物は、Activityクラスとその画面を構成するlayout XMLファイルになります。

<!-- Layout XML -->
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    tools:context=".MainActivity">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:id="@+id/next_screen_button"
        android:text="Next Screen" />
</RelativeLayout>

Layoutイメージ
スクリーンショット 2013-09-18 8.20.37

画面は同じレイアウトですが、【動作】と【表示】が異なるため、それぞれ画面ごとにActivityクラスを作る必要があります

// MainActivity.java
public class MainActivity extends Activity {

    protected Button nextScreen;

    protected MainActivity self = MainActivity.this;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        nextScreen = (Button) findViewById(R.id.next_screen_button);
        nextScreen.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent intent = new Intent();
                intent.setClass(self, SecondActivity.class);
                startActivity(intent);
            }
        });
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }
}

2つ目, 3つ目の画面は、MainActivityを継承して表示と動作のみ上書きします

// Second Activity
public class SecondActivity extends MainActivity {

    // ClickListenerをOverride

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        this.nextScreen.setText("Second Activity");
        this.nextScreen.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent intent = new Intent();
                intent.setClass(self, LastActivity.class);
                startActivity(intent);
            }
        });
    }
}
// Last Activity
public class LastActivity extends MainActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        nextScreen.setText("Last Activity");
        nextScreen.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(self, "Last Activity", Toast.LENGTH_SHORT).show();
            }
        });
    }
}

各ActivityをAndroidManifestに追加するのもお忘れなく

<activity
    android:name="jp.classmethod.android.samplescreen.MainActivity"
    android:label="@string/app_name" >
    <intent-filter>
        <action android:name="android.intent.action.MAIN" />

        <category android:name="android.intent.category.LAUNCHER" />
    </intent-filter>
</activity>
<activity android:name=".SecondActivity" />
<activity android:name=".LastActivity" />

Activityは、互いの画面とのRelation等は知りません。
そのため、次の画面(Activity)に移動したい場合は、Intentクラスを利用してMessageを飛ばすイメージでActivity同士の連携を図ります

実行

device-2013-09-18-082840

Next Screenをタップすると
device-2013-09-18-082853

さらにNext Screenをタップ
device-2013-09-18-083632

まとめ

単純な画面遷移の実装を比較しました。
ざっと見通すと、やはりどうしてもAndroidの方がコードの記述量は多くなるようです。その分ブラックボックスとなる部分が少なく、汎用的に、柔軟に動作を改変することが出来ます。
iOSの方はかなりフレームワーク、IDEの恩恵に預かる部分が多く、開発者にとって煩わしい部分はほとんど全て勝手にカバーされているイメージです。
そのため、何をやってるのかわからないブラックボックスな部分も多々あるように感じましたが、その分アイデアや機能の実装に注力することができ、非常にスピーディーな開発が可能になります。

iOSのフレームワークとIDEの強力なサポートの一片が垣間見れたのではないでしょうか。素手で殴りあった今回の結果は、iOSの勝利と言えそうです。
外部ライブラリを導入してドーピングした後の比較も今後やってみたいと思います

Androidももっと簡単にUI実装ができるサポートを早う!!(切実)

Share this article

facebook logohatena logotwitter logo

© Classmethod, Inc. All rights reserved.